<template>
	<view id="AncestralTemple" class="digital-page">
		<back-btn></back-btn>
		<view class="banner">
			<view class="title-area">
				<view class="title-cn">宗祠家庙</view>
				<view class="title-en">Ancestral temple</view>
			</view>
		</view>
		<view class="main-content">
			<view class="header">传统建筑</view>
			<view class="lower-area">
				<view class="district" v-for="(item,k) in lowerRow">
				    <view class="title-behind">{{item.Topic}}</view>
					<view class="galleries">
						<view class="part-img" :style="{backgroundImage: `url(${baseUrl + item.FeaturedImage})`}"></view>
					</view>
					<view class="text">
						<p v-html="item.Content"></p>
				    </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>	
	// 朱熙然 @ 2023年4月21日 
	// 姚珅 @ 2023年5月8日 绑定
	// 姚珅 @ 5月21日 返回组件添加以及绑定修改
	import useCategory from '@/stores/digitalPlatform/useServerData'
	import backBtn from './back.vue'
	export default {
		components: {
			backBtn
		},
		data() {
			return {
				lowerRow:[],
				baseUrl: ""
			}
		},
		onLoad(opt){
			let promise = useCategory(opt.title || "宗祠家庙");
			promise.then(msg => {
				this.baseUrl = msg.baseUrl;
				this.lowerRow = msg.data.upper;
			})
		}
	}
</script>

<style lang="less">
	@import url(shared.less);
	@content-size: 25rpx;
	@title-behind-size:22rpx;
	@left-size:10rpx;
	
	#AncestralTemple{
		.title-area {
			width: calc(32rpx * 18);
		}
		.lower-area{
			.district{
			    .title-behind{
					margin-top: 35rpx;
				    margin-left:@left-size;
				    font-size: @title-behind-size;
				    color: #A1A6AE;					
		        }
			    .title-behind-other{
				        margin-left:@left-size;
				        font-size: @title-behind-size;
				        color: #A1A6AE;
					    margin-top: 56rpx;
			    }
			    .text{
			    	width: calc(100% - 20rpx);
			    	margin-top: 35rpx;
			    	margin-left: @left-size;
			    	font-size: @content-size;
			    	letter-spacing: 1px;
			    	line-height: @content-size + 18rpx;
			    	color: #e5e5e5;
			    }
			    .text-end{
			    	width: calc(100% - 20rpx);
			    	margin-top: 35rpx;
			    	margin-left: @left-size;
			    	font-size: @content-size;
			    	letter-spacing: 1px;
			    	line-height: @content-size + 18rpx;
			    	color: #e5e5e5;
			    }
				.galleries{
					position:relative;
					.arrow{
						font-size: 32rpx;
						margin-left: 16rpx;
						display: inline;
					}
					.part-img{
						width: calc(100% - 20rpx);
					    height: 480rpx;
						margin-top: 48rpx;
						margin-left:@left-size;
					    border-radius: 50rpx;
						background-position: 50% 50%;
						background-size: cover;
						box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.58);
					}
				}
		    }
		}
	}
	
</style>